{% set page_name = "管理徽章" %}
{% extends "badge_base.html" %}
{% import "components/paginator.html" as paginator with context %}
{% import "components/nothing.html" as nothing with context %}
{% block badge_content %}
<div class="section">
    <div class="section__header">
        <h1 class="section__title">{{ _('管理徽章')}}</h1>
        <a href="{{ url('badge_add') }}" class="section__tools">
            <button class="primary rounded button">{{ _('添加徽章') }}</button>
        </a>
    </div>
    <div class="section__body no-padding">
        {% if not ddocs.length %}
        {{ nothing.render('对不起，没有徽章。') }}
        {% else %}
        <div class="section__table-container">
            <table class="data-table section__table-heade">
              <colgroup>
                <col class="col--id">
                <col class="col--title">
                <col class="col--preview">
                <col class="col--actions">
              </colgroup>
              <thead>
                <tr>
                  <th class="col--id">{{ _('徽章ID') }}</th>
                  <th class="col--title">{{ _('徽章标题') }}</th>
                  <th class="col--preview">{{ _('徽章预览') }}</th>
                  <th class="col--actions">{{ _('Action') }}</th>
                </tr>
              </thead>
              <tbody>
                {%- for ddoc in ddocs -%}
                <tr>
                  <td class="col--id">{{ ddoc._id }}</td>
                  <td class="col--title">{{ ddoc.title }}</td>
                  <td class="col--preview">
                    <a href="{{ url('badge_detail', id=ddoc._id) }}" class="user-profile-badge v-center" style="background-color:{{ ddoc.backgroundColor }};color:{{ ddoc.fontColor }};" data-tooltip="{{ ddoc.title }}">{{ ddoc.short }}</a>
                  </td>
                  <td class="col--actions">      
                    <a href="{{ url('badge_edit', id=ddoc._id) }}" class="typo-a">{{ _('Edit') }}</a>
                  </td>
                </tr>
                {%- endfor -%}
              </tbody>
            </table>
            {{ paginator.render(page, dpcount) }}
        </div>
	{% endif %}
    </div>
</div>
{% endblock%}
